iT邦幫忙

2026 iThome 鐵人賽

DAY 2
0

大家好!昨天介紹了TypeScript(以下簡稱TS)的基本知識,今天要來設置TS的開發環境。之後我們就能夠正式進入TS的學習與開發了!


安裝Node與TypeScript

在開始之前,我們需要先安裝Node.js和TS。

首先,先安裝Node.js的最新檔,如果不確定是否安裝過Node.js,可以在CMD(命令提示字元)確認,也可以檢查看看目前的版本號。
https://ithelp.ithome.com.tw/upload/images/20260903/20183881VyprJ12GLw.png

安裝好後,在Node.js附帶的npm套件管理系統內,直接用指令下載TS。

https://ithelp.ithome.com.tw/upload/images/20260903/20183881vCety13qkJ.png

圖中的-g--global 全域安裝的縮寫,代表開發者能夠在任何專案或目錄下直接執行指令,但不會將其寫入當前專案的package.json中,多人開發專案更可能遇到版本不一致的情況,因此有些人會選擇使用本地安裝

本地安裝的寫法如附圖所示:
https://ithelp.ithome.com.tw/upload/images/20260903/20183881L8PsdLJZ5n.png


實際測試TS

安裝好之後,我們就可以開始測試TS了。首先,先建立一個新資料夾,裡面再建立一個test.ts 的檔案,然後就能開始測試啦!

在測試前,我們得先初始化tsconfig.json ,以避免不必要的錯誤及麻煩。

https://ithelp.ithome.com.tw/upload/images/20260903/201838814ZZkomiIpt.png

接著,我們在VS Code打上錯誤的程式碼,如下圖:

https://ithelp.ithome.com.tw/upload/images/20260903/20183881U1ubDAVmGp.png

說明:將名字的型別設成number,此時TS會提示開發者不可將字串型別指派給型別為number 的參數。

之後將程式修正(將number 改為string )

https://ithelp.ithome.com.tw/upload/images/20260903/20183881Bg4TQTQo9Z.png

接下來,我們實際執行一次該如何正確運行這段程式,根據之前的介紹,我們需要透過編譯,將.ts 的檔案轉成系統看得懂的JS檔案,在終端輸入下列指令:

https://ithelp.ithome.com.tw/upload/images/20260903/20183881ZtNAwGbbQW.png

https://ithelp.ithome.com.tw/upload/images/20260903/20183881gXALpmL3R1.png

小提示:如果不先設定tsconfig.json檔案的話,TS會將test.tstest.js 兩者共有的函式視為重複宣告而報錯


Q&A

  • 什麼是Node.js?

    • Node.js是JavaScript的執行環境,能夠讓JavaScript在電腦或伺服器中獨立運行,不用依靠瀏覽器運作。
  • 為什麼需要安裝Node.js?

    • 因為TS無法被瀏覽器或電腦直接運行,需要透過轉譯成JS的形式才能被執行,而Node.js提供了tsc的執行環境,加上其附帶的npm能夠幫助開發者方便安裝TS套件、開發工具等等。最重要的是,格式化、打包工具等等都依賴Node.js運行。但是Node.js在最新的LTS版本中,已經內建支援執行TS的功能,能夠執行一些簡單的程式碼(具有enum、namespace等的程式無法使用)。
  • 為什麼在設定tsconfig.json後,TS反而不會報錯呢?

    • 因為TS預設會把沒有任何import或export的檔案視為全域腳本,所以它會認為test.ts和編譯出來的 test.js裡面的變數互相衝突。在設定後,TS會將這個目錄下的檔案視為專案,並根據設定隔離兩者,也就解決了重複宣告的問題。

小結

今天實作了TS的環境建置與安裝,也用簡單的程式示範了TS的報錯和轉譯,明天就能開始介紹TS的型別系統了!
因為自己也是邊查資料邊摸索,但是能夠逐步了解、實作,也為我帶來了不少收穫,期待之後與大家在介紹更多有關TS的知識!


上一篇
[DAY-1] TypeScript入門簡介
系列文
從零開始學習TypeScript:菜鳥的入門介紹與概覽2
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言